<template>
  <div>
    <a-upload
      list-type="picture"
      :default-file-list="fileList"
      class="upload-list-inline"
      :remove="handleRemove"
      :before-upload="beforeUpload"
    >
      <a-button>
        <a-icon type="upload"/>
        upload
      </a-button>
    </a-upload>
  </div>
</template>

<script>
import uploadAttachmentService from "@/components/MFileUpload/attachmentService";
import FileSaver from "file-saver";
export default {
  props: ['associateFormId', 'associateFormName', 'operatorType'],
  data() {
    return {
      fileList: [
        // {
        //   uid: '-1',
        //   name: 'xxx.png',
        //   status: 'done',
        //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        //   thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        // },
        // {
        //   // uid: '-2',
        //   name: 'yyy.png',
        //   // status: 'done',
        //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        //   // thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        // },
      ],
    };
  },
  created() {
    console.log(this.associateFormId)
    if (this.associateFormId!=null){
      this.findFile(this.associateFormId,this.associateFormName)
    }

  },
  watch: {
    //监听fileList并将选中的文件传到父组件
    // fileList:function (){
    //   //将文件回传到父组件进行上传
    //   this.$emit('fileList', this.fileList);
    // },

    // //监听组件的状态的变化
    'operatorType':function (){
      this.findFile(this.associateFormId,this.associateFormName)
      // this.fileList=[]
    },
    // //监听组件的状态的变化
    'associateFormId':function (){
      this.findFile(this.associateFormId,this.associateFormName)
      // this.fileList=[]
    },
    'associateFormName':function (){
      this.findFile(this.associateFormId,this.associateFormName)
      // this.fileList=[]
    },
  },
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
      if (file.attachmentId){
        this.deleteFile(file)
      }
        // console.log(this.fileList,file)
        this.$emit("change", this.fileList)
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      // console.log(this.fileList,file)
      this.$emit("change", this.fileList)
      return false;
    },
    handleUpload() {

      // const {fileList} = this;
      // const formData = new FormData();
      // fileList.forEach(file => {
      //   formData.append('files[]', file);
      // });
      // this.uploading = true;

    },
    findFile(associateFormId, associateFormName) {
      console.log(associateFormId, associateFormName)
      if (associateFormId != null && associateFormName != null) {
        uploadAttachmentService.findFile(associateFormId, associateFormName).then((res) => {
          // this.reFileList = res.data

          if (res.data.length != 0) {
            res.data.forEach(item => {
              let file = {
                attachmentId: item.attachmentId,
                name: item.attachmentRealName,
                url: process.env.VUE_APP_BASE_URL + "/api/img" + item.attachmentAddr
              }
              console.log(file)
              this.fileList.push(file)
            })
          }
        })

      }
    },
    //下载附件
    down(file) {
      uploadAttachmentService.down(file.attachmentId).then((res) => {
        FileSaver.saveAs(
          new Blob([res.data], {type: "application/octet-stream"}),
          file.attachmentRealName
        )
      })
    },
    //通过附件id对附件进行删除
    deleteFile(item) {
      console.log(item)
      this.$XModal.confirm('您确定要删除吗？').then(type => {
        if (type === 'confirm') {
          uploadAttachmentService.deleteFile(item.attachmentId).then(() => {
            this.$XModal.message({content: '删除成功'})
            this.findFile(this.associateFormId, this.associateFormName)
          })
        }
      })
    },
  }
};
</script>
<style scoped>
/* tile uploaded pictures */
.upload-list-inline >>> .ant-upload-list-item {
  float: left;
  width: 200px;
  margin-right: 8px;
}

.upload-list-inline >>> .ant-upload-animate-enter {
  animation-name: uploadAnimateInlineIn;
}

.upload-list-inline >>> .ant-upload-animate-leave {
  animation-name: uploadAnimateInlineOut;
}
</style>
